<template>
    <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        :inline="true"
        class="demo-ruleForm demo-form-inline the_form"
    >
        <el-form-item label="商品名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="class">
            <el-select v-model="ruleForm.class" clearable placeholder="请选择">
                <el-option
                    v-for="item in classOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="商品关键词" prop="keyword">
            <el-input v-model="ruleForm.keyword"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="dw">
            <el-input v-model="ruleForm.dw"></el-input>
        </el-form-item>
        <el-form-item label="商品简介" prop="desc" style="width: 100%">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>

        <el-form-item label="商品封面图" prop="desc">
            <el-upload
                :limit="1"
                action="/upload/tools/saveavatar/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess"
            >
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="轮播图" prop="swiperImage">
            <el-upload
                :limit="5"
                action="/upload/tools/saveavatar/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSwiperSuccess"
            >
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="运费模板" prop="freightTemplate">
            <el-select
                v-model="ruleForm.freightTemplate"
                clearable
                placeholder="请选择"
            >
                <el-option
                    v-for="item in freightTemplateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                title: '',
                keyword: '', // 关键词
                desc: '', // 简介
                image: '', // 封面图
                freightTemplate: '', // 运费模板id
                class: '',
                dw: '',
                swiperImage: [],
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur',
                    },
                    {
                        max: 10,
                        message: '最多10个字符',
                        trigger: 'blur',
                    },
                ],
            },
            freightTemplateOptions: [
                {
                    value: '选项1',
                    label: '黄金糕',
                },
                {
                    value: '选项2',
                    label: '炸里脊',
                },
                {
                    value: '选项3',
                    label: '肥牛',
                },
                {
                    value: '选项4',
                    label: '大鸡腿',
                },
                {
                    value: '选项5',
                    label: '河谷',
                },
            ],
            classOptions: [
                {
                    value: '选项1',
                    label: '黄金糕',
                },
                {
                    value: '选项2',
                    label: '炸里脊',
                },
                {
                    value: '选项3',
                    label: '肥牛',
                },
                {
                    value: '选项4',
                    label: '大鸡腿',
                },
                {
                    value: '选项5',
                    label: '河谷',
                },
            ],
        }
    },
    methods: {
        //图片上传成功实现本地预览
        handleSwiperSuccess(res, file) {
            this.ruleForm.swiperImage.push(URL.createObjectURL(file.raw)) //表单获取到提交时要传的图片路径
        },
        //图片上传成功实现本地预览
        handleAvatarSuccess(res, file) {
            this.ruleForm.image = URL.createObjectURL(file.raw) //表单获取到提交时要传的图片路径
            console.log(this.ruleForm.image)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        submitForm(formName) {
            return new Promise((resolve, reject) => {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        resolve('submit!')
                    } else {
                        reject('error submit!!')
                        return false
                    }
                })
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
    },
}
</script>

<style lang='scss'>
.the_form {
    & > div {
        width: 48%;
        display: inline-flex !important;
        /deep/.el-form-item__content {
            flex: 1;
            .el-select {
                display: block;
            }
        }
    }
}
</style>